import React, { useState } from 'react';
import {
  Box, Grid, Typography, Button, TextField, Select, MenuItem,
  Chip, FormControl, InputLabel, Avatar, IconButton, List, ListItem,
  ListItemAvatar, ListItemText, Divider, LinearProgress, ThemeProvider,CssBaseline
} from '@mui/material';
import DeleteIcon from '@mui/icons-material/Delete';
import EditIcon from '@mui/icons-material/Edit';
import AddIcon from '@mui/icons-material/Add';
import DateRangeIcon from '@mui/icons-material/DateRange';
import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
import AssessmentIcon from '@mui/icons-material/Assessment';
import theme from "../themes/theme ";

const expertsMock = [
  { id: 1, name: '王教授', title: '数字化转型领域专家', color: '#2979FF' },
  { id: 2, name: '李博士', title: '信息技术架构专家', color: '#7C4DFF' },
  { id: 3, name: '张研究员', title: '数据治理专家', color: '#EA80FC' },
  { id: 4, name: '陈顾问', title: '企业战略规划专家', color: '#4DB6AC' },
];

const evaluationModelOptions = [
  '国家标准数字化转型成熟度模型V1.0'
];

export default function ExpertEvaluationPage() {
  const [selectedModel, setSelectedModel] = useState(evaluationModelOptions[0]);
  const [selectedExperts, setSelectedExperts] = useState([expertsMock[0], expertsMock[1]]);
  const [startDate, setStartDate] = useState('2025-06-20');
  const [endDate, setEndDate] = useState('2025-07-05');

  return (
  <ThemeProvider theme={theme}>
      <CssBaseline />  
    <Box sx={{ display: 'flex', height: '100vh', bgcolor: '#0D1B2A', color: '#E1E8ED', p: 2 }}>
      {/* Expert List */}
      <Box sx={{ width: 240, mr: 2 }}>
        <Typography variant="h6" gutterBottom sx={{ display: 'flex', alignItems: 'center' }}>
          <Avatar sx={{ mr: 1, bgcolor: '#FF9800' }}><InsertDriveFileIcon /></Avatar> 外部专家管理
        </Typography>
        <List>
          {expertsMock.map((expert) => (
            <ListItem key={expert.id} sx={{ pl: 0 }}>
              <ListItemAvatar>
                <Avatar sx={{ bgcolor: expert.color }}>{expert.name[0]}</Avatar>
              </ListItemAvatar>
              <ListItemText primary={expert.name} secondary={expert.title} />
              <IconButton color="primary"><EditIcon /></IconButton>
              <IconButton color="error"><DeleteIcon /></IconButton>
            </ListItem>
          ))}
        </List>
        <Button startIcon={<AddIcon />} variant="contained" sx={{ mt: 1, width: '100%' }}>
          新增专家
        </Button>
      </Box>

      {/* Evaluation Request Form */}
      <Box sx={{ flex: 1, p: 2, border: '1px solid #2B3A55', borderRadius: 2 }}>
        <Typography variant="h6" gutterBottom sx={{ display: 'flex', alignItems: 'center' }}>
          <Avatar sx={{ mr: 1, bgcolor: '#FFA726' }}><DateRangeIcon /></Avatar> 专家评估邀请
        </Typography>

        <FormControl fullWidth sx={{ mb: 2 }}>
          <InputLabel sx={{ color: '#E1E8ED' }}>选择评估模型</InputLabel>
          <Select value={selectedModel} onChange={(e) => setSelectedModel(e.target.value)} label="选择评估模型">
            {evaluationModelOptions.map(model => (
              <MenuItem key={model} value={model}>{model}</MenuItem>
            ))}
          </Select>
        </FormControl>

        <Box sx={{ mb: 2 }}>
          <Typography variant="subtitle1">选择专家（可多选）</Typography>
          {selectedExperts.map(expert => (
            <Chip key={expert.id} label={expert.name} onDelete={() => setSelectedExperts(prev => prev.filter(e => e.id !== expert.id))} sx={{ mr: 1, mb: 1, bgcolor: expert.color, color: '#fff' }} />
          ))}
          <Button variant="outlined" size="small">+ 添加专家</Button>
        </Box>

        <Grid container spacing={2} mb={2}>
          <Grid item xs={6}>
            <TextField fullWidth label="开始日期" value={startDate} onChange={(e) => setStartDate(e.target.value)} type="date" InputLabelProps={{ shrink: true }} />
          </Grid>
          <Grid item xs={6}>
            <TextField fullWidth label="结束日期" value={endDate} onChange={(e) => setEndDate(e.target.value)} type="date" InputLabelProps={{ shrink: true }} />
          </Grid>
        </Grid>

        <TextField
          fullWidth
          multiline
          minRows={3}
          label="邀请说明"
          defaultValue="请专家根据企业数字化能力现状，对各维度进行客观评分..."
          sx={{ mb: 2 }}
        />

        <Button variant="contained" sx={{ mt: 1 }}>发送邀请</Button>
      </Box>

      {/* Score Summary */}
      <Box sx={{ width: 360, ml: 2, p: 2, border: '1px solid #2B3A55', borderRadius: 2 }}>
        <Typography variant="h6" gutterBottom sx={{ display: 'flex', alignItems: 'center' }}>
          <Avatar sx={{ mr: 1, bgcolor: '#FF7043' }}><AssessmentIcon /></Avatar> 专家打分综合评估
        </Typography>

        <Typography variant="subtitle1">企业数字化转型成熟度综合评分</Typography>
        <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
          <Typography variant="h4" sx={{ color: '#4CAF50', mr: 1 }}>4.2</Typography>
          <Typography>优化级</Typography>
        </Box>
        <LinearProgress variant="determinate" value={84} sx={{ height: 10, borderRadius: 5, mb: 2 }} />

        <Typography variant="subtitle2" sx={{ mb: 1 }}>各专家评分对比</Typography>
        <Box sx={{ fontSize: 14 }}>
          <Box>战略规划能力：<span style={{ color: '#4FC3F7' }}>王 4.2</span> 李 3.8 张 4.0 <span style={{ float: 'right' }}>平均分: 4.0</span></Box>
          <Box>数据资产管理：<span style={{ color: '#4FC3F7' }}>王 3.5</span> 李 4.0 张 3.6 <span style={{ float: 'right' }}>平均分: 3.7</span></Box>
          <Box>技术架构能力：<span style={{ color: '#4FC3F7' }}>王 4.3</span> 李 4.8 张 4.4 <span style={{ float: 'right' }}>平均分: 4.5</span></Box>
        </Box>

        <Box sx={{ display: 'flex', justifyContent: 'space-between', mt: 2 }}>
          <Button variant="contained">详细报告</Button>
          <Button variant="outlined">导出结果</Button>
        </Box>
      </Box>
    </Box>
  </ThemeProvider>  
  );
}
